<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-店铺主页</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="register-bar collect-bar setting-bar big-pad">
    <div class="pos-abs-tl display-block">
        <h2 class="header-box background">
            <a class="go-back-btn sprite-icon" id="forgetGoBack" href="#"></a>
            <span id="shopType">赏点工坊赏点工坊赏点</span>
            <a class="share-shop-btn" href="javascript:;"></a>
            <span id="settingMenu" class="has-icon sprite-icon"></span>
        </h2>
        <div class="header-active display-block background-5c2566">
            <label class="header-active-item selected">
                <i class="background-red">赠</i><span class="text-clamp-overflow">全场满100送张飞牛肉+蓝莓酱</span>
                <em>5个活动</em>
            </label>
            <div class="header-active-slide">
                <label class="header-active-item">
                    <i class="background-org">免</i><span class="text-clamp-overflow">全场满100送张飞牛肉+蓝莓酱</span>
                </label>
                <label class="header-active-item active">
                    <i class="background-red">赠</i><span class="text-clamp-overflow">全场满100送张飞牛肉+蓝莓酱全场满100送张飞牛肉+蓝莓酱全场满100送张飞牛肉+蓝莓酱</span>
                </label>
            </div>
        </div>
    </div>

    <div class="setting-menu pos-abs-tr">
        <span class="arrow-top"></span>
        <a href="#"><i class="sprite-icon index-icon"></i>首页</a>
        <a href="#"><i class="sprite-icon shop-icon"></i>商品分类</a>
        <a href="#"><i class="sprite-icon car-icon"></i>购物车</a>
        <a href="#"><i class="sprite-icon goods-icon"></i>实物订单</a>
        <a href="#"><i class="sprite-icon mine-icon"></i>我的</a>
    </div>

    <div class="shopList-box introduce-bar">
        <div class="list-nav" style="top: 0">
            <div class=" list-row nav-cont">
                <ul class="row-4">
                    <li><a href="javascript:;" class="nav-item active">默认</a></li>
                    <li><a href="javascript:;" class="nav-item">价格<i
                            class="sprite-icon icon-up"></i></a></li>
                    <li><a href="javascript:;" class="nav-item">热销</a></li>
                    <li><a href="javascript:;" class="nav-item check-item">筛选<i
                            class="shopType-sprite-icon  icon-check"></i></a></li>
                </ul>
                <div class="menu-line"></div>
            </div>
            <a id="listModal" href="javascript:;" class="list-change">
                <i class="sprite-icon icon-list"></i>
            </a>
        </div>
        <div class="shopList-content">
            <div id="wrapper">
                <div id="scroller">
                    <div class="related-box list-row">
                        <!--没有产品列表-->
                        <!--<div class="stores-nonePro">-->
                        <!--<img src="img/stores-nonePro.png">-->
                        <!--<span>亲，没有你找的产品</span>-->
                        <!--</div>-->

                        <ul class="row-2 product-list">
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/product-img1.jpg"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/menu-icon2.png"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/product-img1.jpg"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/menu-icon2.png"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/product-img1.jpg"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/menu-icon2.png"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/product-img1.jpg"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                            <li>
                                <div class="related-intro">
                                    <a href="#">
                                        <label class="related-product"><img src="img/menu-icon2.png"></label>
                                        <span class="related-name text-clamp-overflow">海南三亚小台农芒果1.5kg海南 三亚小台农芒果1.5kg</span>

                                        <p class="related-price">
                                            <label><i>￥</i>148.<s>00</s><span>￥159.00</span></label>
                                            <i class="sprite-icon shopCar-icon"></i>
                                        </p>
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="none-data">
                        <h2 class="related-line"><span>没有更多数据！</span></h2>
                    </div>
                    <div id="pullUp" style="height: 48px;  line-height: 48px; margin-top: 10px;">
                        <span class="pullUpLabel">加载更多...</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="stores-tips pos-abs-bl"><a href="#">下单满500元免运费，已加入购物车<span>342.60</span>元<i>去结算 ></i></a></div>
    </div>

    <!--筛选框-->
    <div id="checkBox" class="disk"></div>
    <div class="checkShop-bar animated animated-left">
        <div class="checkShop-cont">
            <div class="swiper-container checkShop-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="checkShop-box pad-b20">
                            <h2 class="tips">价格区间</h2>

                            <div class="checkShop-btns clearfix">
                                <div class="price-btn"><span>全部</span></div>
                                <div class="price-btn"><span>100以下</span></div>
                                <div class="price-btn"><span>100-300</span></div>
                                <div class="price-btn"><span>300-500</span></div>
                                <div class="price-btn active"><span>500-800</span></div>
                                <div class="price-btn"><span>800-1000</span></div>
                                <div class="price-btn"><span>1000以上</span></div>
                            </div>
                            <div class="price-input list-row">
                                <ul class="row-2">
                                    <li>
                                        <label><input type="text" value="" placeholder="最低价"></label>
                                    </li>
                                    <li>
                                        <label><input type="text" value="" placeholder="最高价"></label>
                                    </li>
                                </ul>
                                <span class="check-line"></span>
                            </div>
                        </div>
                        <div class="checkShop-box  pad-b10">
                            <h2 class="tips active">品类<i class="sprite-icon icon-arrow"></i></h2>

                            <div class="checkShop-btns clearfix" style="height: 68px;">
                                <div class="price-btn"><span>全部</span></div>
                                <div class="price-btn"><span>休闲食品</span></div>
                                <div class="price-btn"><span>进口食品</span></div>
                                <div class="price-btn active"><span>生鲜食品</span></div>
                                <div class="price-btn"><span>粮油干货</span></div>
                                <div class="price-btn"><span>营养保健</span></div>
                                <div class="price-btn"><span>酒水饮料</span></div>
                                <div class="price-btn"><span>冲调饮料</span></div>
                                <div class="price-btn"><span>其他</span></div>
                            </div>
                        </div>
                        <div class="checkShop-box">
                            <div class="form-list">
                                <ul>
                                    <li>
                                        <span>配送至</span>
                                        <label><a href="javascript:;" class="select-btn text-overflow" id="checkArea">请选择</a></label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="checkShop-bto">
            <div class="flex-btn">
                <a id="resetBtn" class="flex-btn-left" href="javascript:;"><span>重置</span></a>
                <a id="ensureBtn" class="flex-btn-right active" href="javascript:;"><span>确定</span></a>
            </div>
        </div>
    </div>

    <!--选择配送地址-->
    <div id="diskCont" class="checkShop-area animated-disk  animated animated-left">
        <h2 class="disk-title">配送至<a class="close-disk sprite-icon" id="closeDisk" href="javascript:;"></a></h2>

        <div class="disk-cont">
            <div class="disk-tab clearfix">
                <a class="disk-tab-option show-modal active" id="province" href="javascript:;"><span>请选择</span></a>
                <i class="current-line"></i>
            </div>
            <div class="disk-tab-cont" id="areaCont">
                <div id="showArea"></div>
                <div class="disk-loading"></div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/iscroll-probe.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<!--<script src="js/area.js"></script>-->
<script src="js/areaDate.js"></script>
<script src="js/newArea.js"></script>
<script src="js/box.js"></script>
<script src="js/public.js"></script>
<script>
    $(function () {
        //展开活动
        $(".header-active-item.selected em").click(function () {
            $(this).closest(".selected").toggleClass("active");
            $(".header-active-slide").slideToggle(300);
        });

        var myScroll = publicFuns.newIScrollRefresh("#wrapper", "", loadFun, 0);
        var mySwiper = publicFuns.newSwiper(".checkShop-swiper", 3);
        mySwiper.update();

        //加载数据方法
        function loadFun() {
            console.log("加载出新的数据显示到页面上。");
        }

        //显示设置菜单
        $("#settingMenu").click(function () {
            $(".setting-menu").fadeToggle();
        });

        //配送地址
        $("#checkArea").click(function () {
            $("#diskCont").addClass("active");
            $.checkArea.init("#showArea", 2, false);
        });

        //菜单切换
        //初始化菜单底部的线条
        var $menuLine = $(".menu-line");
        $menuLine.css({
            "left": $("a.nav-item.active").get(0).offsetLeft,
            "width": $("a.nav-item.active").get(0).offsetWidth
        });
        $(".nav-cont").find("a").click(function () {
            if (!$(this).hasClass("active")) {
                $menuLine.animate({
                    "left": $(this).get(0).offsetLeft,
                    "width": $(this).get(0).offsetWidth
                }, 300);
            }
            //筛选
            if ($(this).hasClass("check-item")) {
                $("#checkBox").fadeIn(150, function () {
                    $(".checkShop-bar").addClass("active");
                    mySwiper.update();
                });
            }
            //价格
            if ($(this).hasClass("active")) {
                if ($(this).children().hasClass("icon-up")) {
                    $(this).children().toggleClass("active");
                    if ($(this).children().hasClass("active")) {
                        console.log("排序价格递减");
                    } else {
                        console.log("排序价格递增");
                    }
                }
            }
            $(this).addClass("active").parents("li").siblings().find("a").removeClass("active");
            myScroll.refresh();
        });

        //显示隐藏
        $(".tips.active").click(function () {
            $(this).find("i").toggleClass("active");
            if ($(this).find("i").hasClass("active")) {
                $(this).next().css("height", "auto");
            } else {
                $(this).next().css("height", "68px");
            }
            mySwiper.update();
        });

        //关闭弹窗
        $("#checkBox").click(function () {
            $(".checkShop-bar").removeClass("active");
            $("#diskCont").removeClass("active");
            $(this).fadeOut(150);
        });

        //选择
        $(".price-btn").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
        });

        //确定
        $("#ensureBtn").click(function () {
            $("#checkBox").click().trigger("click");
        });

        //切换列表模式
        $("#listModal").click(function () {
            $(this).find("i").toggleClass("active");
            $(".product-list").toggleClass("simple-list");
            myScroll.refresh();
        });
    });
</script>
</body>
</html>